<template>
  <div class="business">
    <!-- 操作菜单 -->
    <div class="menu">
      <!-- 地区查询下拉框 -->
      <div class="flex flex-wrap items-center">
        <el-dropdown>
          <el-button type="primary"> 地区查询 </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>成都</el-dropdown-item>
              <el-dropdown-item>上海</el-dropdown-item>
              <el-dropdown-item>北京</el-dropdown-item>
              <el-dropdown-item>深圳</el-dropdown-item>
              <el-dropdown-item>广州</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <el-button
        color="#409eff"
        style="margin-left: 15px; color: white"
        @click="del"
        >删除</el-button
      >
    </div>

    <!-- 表单区 -->
    <div>
      <el-table
        ref="tableDataRef"
        :data="
          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="name"
          label="商家"
          width="180"
          class="busPerson"
        />
        <el-table-column prop="phone" label="联系电话" width="200px" />
        <el-table-column prop="address" label="地址" class="busAddress" />
        <el-table-column prop="cuisine" label="菜系" width="450px" />
        <el-table-column prop="star" label="评分" width="280" />
      </el-table>

      <el-pagination
        class="fy"
        layout="prev, pager, next"
        @current-change="current_change"
        :total="total"
        background
      >
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  data() {
    return {
      total: 100, //默认数据总数
      pagesize: 2, //每页的数据条数
      currentPage: 1, //默认开始页面
      chageList: [],
      tableData: "",
    };
  },
  methods: {
    //   tableRowClassName( row, rowIndex ) {
    //     if (rowIndex === 0) {
    //       return "th";
    //     }
    //     return "";
    //   },
    //   current_change (currentPage) {
    //     this.currentPage = currentPage;
    //   },
    //   handleSelectionChange(val){
    //     this.chageList = val || [];
    //   },
    //   del() {
    //     let list= this.chageList || [];
    //     let ids = [];
    //     for(let item of list){
    //       ids.push(item.id);
    //     }
    //     let tabList = [];
    //     for(let item of this.tableData){
    //       if(ids.includes(item.id)) continue;
    //       tabList.push(item);
    //     }
    //     this.tableData = tabList || [];
    //   },
    // },
    // created: function () {
    //   this.total = this.tableData.length;
  },
};
</script>

<style scoped>
.business {
  width: 1050px;
  background-color: #fff;
  margin: 20px 10px 0 0;
  border-radius: 8px;
}
.example-showcase .el-dropdown {
  /* margin-left: 15px; */
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.menu {
  display: flex;
  /* justify-content: space-between; */
  padding: 15px 15px;
}
.busPerson,
.busAddress {
  width: 180px;
  text-overflow: ellipsis;
  /* 强制不换行 */
  white-space: nowrap;
  overflow: hidden;
}
.fy {
  text-align: center;
  margin-top: 30px;
}
</style>